<template>
  <div class="login">
    <h1>商品后台管理系统</h1>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          type="password"
          v-model="form.password"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item class="login">
        <el-button type="success" @click="submitForm">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>

export default {
  name: "Login",
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
      rules: {
        username: [{ required: true, message: "用户名不能为空" }],
        password: [{ required: true, message: "密码不能为空" }],
      },
    };
  },
  methods: {
    submitForm() {
      // 调用子组件form的validate方法
      this.$refs.form.validate(async (valid) => {
        // valid： 表单校验是否通过
        if (valid) {
          const data = await this.$store.dispatch("user/login", this.form);
          //登录成功与登录失败
          if (data.status === 0) {
            this.$notify({ type: "danger", message: "用户名或密码错误" });
          } else if (data.status === 200) {
            
            this.$store.commit('addAuthRouter')
             this.$router.push('/manage')
          
          }
        }
      });
    },
  },
};
</script>
<style scoped>
.login{
  background-image: url('https://iconfont.alicdn.com/t/03a99332-92a3-4703-83da-93c07a6b3f44.png');
  background-repeat: no-repeat;
  background-size: cover;
  height: 388px;
}
h1{
  text-align: center;
}
.login{
   text-align: center;
}
form{
  width: 30%;
  height: 50%;
  margin: 50px auto;
}
button{
  width: 50%;
}
</style>
